<template>
<div id="perception-ability">
  <div class="buyDis">
    <span>
					<img src="~@/assets/images/flagBlue2x.png" alt="" />
				</span>
    <span class="text">买入分布</span>
  </div>
  <div class="buying" v-show='statusIn == 0'>
    <div class="perceptionIn">
      <div ref="perceptionInChart" style="width:300px;height:300px"></div>
    </div>
    <p class="explain">
      <span class="explainText">
  				圆点面积表示您买入该笔涉及的资金量
  			</span>
      <span class="explainLeft">
  				<i></i>
  				<b>当天买入价低于收盘价</b>
  			</span>
      <span class="explainRight">
  				<i></i>
  				<b>当天买入价高于收盘价</b>
  			</span>
    </p>
    <div class="detail">
      <span class="grade">
  				<i v-text = 'summary.match_in_win_cnt'></i>/<b v-text = 'summary.match_in_cnt'></b>
  			</span>
      <span>
  				您有<b v-text = 'summary.match_in_cnt'></b>笔买入，
          买入总额<b v-text = 'summary.match_in_amt'></b>元<br/>其中有<i v-text = 'summary.match_in_win_cnt'></i>笔买入价低于当日收盘价
  			</span>
    </div>
  </div>
  <div class='reminder' v-show='statusIn == 1'>您暂无买入交易</div>
  <return-error v-show='statusIn == 2'></return-error>
  <div class="buyDis">
    <span>
					<img src="~@/assets/images/flagBlue2x.png" alt="" />
				</span>
    <span class="text">卖出分布</span>
  </div>
  <div class="sale" v-show='statusOut == 0'>
    <div class="perceptionOut">
      <div ref="perceptionOutChart" style="width:300px;height:300px"></div>
    </div>
    <p class="explain">
      <span class="explainText">
  				圆点面积表示您卖出该笔涉及的资金量
  			</span>
      <span class="explainLeft">
  				<i></i>
  				<b>当天卖出价高于收盘价</b>
  			</span>
      <span class="explainRight">
  				<i></i>
  				<b>当天卖出价低于收盘价</b>
  			</span>
    </p>
    <div class="detail">
      <span class="grade">
  				<i v-text = 'summary.match_out_win_cnt'></i>/<b v-text = 'summary.match_out_cnt'></b>
  			</span>
      <span>
  				您有<b v-text = 'summary.match_out_cnt'></b>笔卖出，
          卖出总额<b v-text = 'summary.match_out_amt'></b>元<br/>其中有<i v-text = 'summary.match_out_win_cnt'></i>笔卖出价高于当日收盘价
  			</span>
    </div>
  </div>
  <div class='reminder' v-show='statusOut == 1'>您暂无卖出交易</div>
  <return-error v-show='statusOut == 2'></return-error>
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/grid'
import RemoteDAO from '../../../common/remoteDAO.js'

const markLine = {
  animation: false,
  silent: true,
  label: {
    normal: {
      textStyle: {
        align: 'right'
      }
    }
  },
  lineStyle: {
    normal: {
      type: 'dotted',
      color: '#c9daeb'
    }
  },
  data: [
    [{
      coord: [-10, -10],
      symbol: 'none'
    }, {
      coord: [10, 10],
      symbol: 'none'
    }]
  ]
};
const symbolSize = function(value) {
  let num = value[2]
  if (num < 100) {
    return 18
  } else if (num > 100000000) {
    return 80
  } else {
    return (Math.log(value[2])) * 4
  }
};
const myPerce = {
  color: ['#eb333b', '#1aae52'],
  grid: {
    top: '25',
    left: '15%',
    right: '10%',
    bottom: '18%',
    show: false
  },
  xAxis: {
    nameLocation: 'middle',
    nameGap: 30,
    nameTextStyle: {
      color: '#999',
      fontSize: 12
    },
    min: -10,
    max: 10,
    interval: 2,
    axisLine: {
      show: true,
      onZero: false,
      lineStyle: {
        color: '#c9daeb'
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        type: 'dashed'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#c9daeb',
        type: 'dotted'
      }
    }
  },
  yAxis: {
    name: '当天收盘涨跌(10%)',
    nameLocation: 'middle',
    nameGap: 30,
    nameTextStyle: {
      color: '#999',
      fontSize: 12
    },
    min: -10,
    max: 10,
    interval: 2,
    axisLine: {
      show: true,
      onZero: false,
      lineStyle: {
        color: '#c9daeb'
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        type: 'dashed'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#c9daeb',
        type: 'dotted'
      }
    }
  },
  series: [{
    type: 'scatter',
  }, {
    type: 'scatter',
  }]
}

export default {
  props: ['fathertime', 'parentDay','monthstatus'],
  data() {
    return {
      buyOver: [],
      buyLow: [],
      sellOver: [],
      sellLow: [],
      summary: '',
      myPerceIn: '',
      myPerceOut: '',
      statusIn: 0,
      statusOut: 0
    }
  },
  created() {
    this.initPerception();
  },
  beforDestroy() {
    echarts.dispose(this.myPerceIn)
    echarts.dispose(this.myPerceOut)
  },
  watch: {
    fathertime: function() {
      this.initPerception()
    },
    monthstatus:function() {
      this.initPerception()
    }
  },
  methods: {
    initPerception() {
      let vm = this;
      let obj0015 = {
        'recent': vm.fathertime
      }
      RemoteDAO.callZL13100015(obj0015, vm.ZL13100015);
    },
    ZL13100015(result) {
      let vm = this;
      if (result.error == '1') {
        vm.statusIn = 2
        vm.statusOut = 2
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits;
        if (specData.length == 0) {
          vm.statusIn = 1
          vm.statusOut = 1
        } else {
          vm.summary = specData[0]._source;
          let obj0023 = {
            'tradedate': vm.parentDay
          }
          RemoteDAO.callZL13100023(obj0023, vm.ZL13100023);
          let obj0024 = {
            'tradedate': vm.parentDay
          }
          RemoteDAO.callZL13100024(obj0024, vm.ZL13100024);
        }
      }
    },
    ZL13100023(result) {
      let vm = this;
      if (result.error == '1') {
        vm.statusIn = 2
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits;
        specData.length == 0 ? vm.statusIn = 1 : vm.drawBuyIn(specData)
      }
    },
    drawBuyIn(specData) {
      let vm = this;
      vm.statusIn = 0;
      vm.buyOver = []
      vm.buyLow = []
      specData.forEach(function(item, i) {
        item._source.stock_ascend >= item._source.match_in_ascend ?
          vm.buyOver.push([item._source.match_in_ascend, item._source.stock_ascend, item._source.match_in_amt]) :
          vm.buyLow.push([item._source.match_in_ascend, item._source.stock_ascend, item._source.match_in_amt])
      });
      vm.$nextTick(() => {
        if (!vm.myPerceIn) {
          vm.myPerceIn = echarts.init(vm.$refs.perceptionInChart);
          vm.myPerceIn.setOption(myPerce)
        }
        vm.myPerceIn.setOption({
          tooltip: {
            backgroundColor: 'rgba(0,0,0,.4)',
            formatter: function(obj) {
              return `当天收盘涨跌：${obj.data[1]}%<br/>
                        买入时股票涨跌幅：${obj.data[0]}%<br/>
                        买入涉及资金量：${obj.data[2]}元`
            }
          },
          xAxis: {
            name: '买入时股票涨跌幅(10%)',
          },
          series: [{
            data: vm.buyOver,
            symbolSize: symbolSize,
            markLine: markLine
          }, {
            data: vm.buyLow,
            symbolSize: symbolSize,
            markLine: markLine
          }]
        });
      })
    },
    ZL13100024(result) {
      let vm = this;
      if (result.error == '1') {
        vm.statusOut = 2
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits;
        specData.length == 0?vm.statusOut = 1:vm.drawSellOut(specData)
      }
    },
    drawSellOut(specData) {
      let vm = this;
      vm.sellOver = []
      vm.sellLow = []
      specData.forEach(function(item, i) {
        item._source.stock_ascend < item._source.match_out_ascend ?
          vm.sellOver.push([item._source.match_out_ascend, item._source.stock_ascend, item._source.match_out_amt]) :
          vm.sellLow.push([item._source.match_out_ascend, item._source.stock_ascend, item._source.match_out_amt])
      });
      vm.$nextTick(() => {
        if (!vm.myPerceOut) {
          vm.myPerceOut = echarts.init(vm.$refs.perceptionOutChart);
          vm.myPerceOut.setOption(myPerce)
        }
        vm.myPerceOut.setOption({
          tooltip: {
            backgroundColor: 'rgba(0,0,0,.4)',
            formatter: function(obj) {
              return `当天收盘涨跌：${obj.data[1]}%<br/>
                        卖出时股票涨跌幅：${obj.data[0]}%<br/>
                        卖出涉及资金量：${obj.data[2]}元`
            }
          },
          xAxis: {
            name: '卖出时股票涨跌幅(10%)',
          },
          series: [{
            data: vm.sellOver,
            symbolSize: symbolSize,
            markLine: markLine
          }, {
            data: vm.sellLow,
            symbolSize: symbolSize,
            markLine: markLine
          }]
        })
      })
    }
  }
}
</script>
<style scoped>
#perception-ability {
  text-align: center;
  margin-bottom: 40px;
}

.buyDis {
  font-size: 24px;
  text-align: center;
  color: #999;
  margin-top: 30px;
}

.buyDis img {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 10px;
}

.explain {
  font-size: 20px;
  color: #999;
}

.explainText {
  display: block;
  margin-bottom: 10px;
}

.explainLeft {
  margin-right: 30px;
}

.explainRight {
  margin-left: 30px;
}

.explainLeft i,
.explainRight i {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.explainLeft i {
  background-color: #EB333B;
}

.explainRight i {
  background-color: #1aae52;
}

.detail {
  height: 82px;
  margin-top: 40px;
  font-size: 20px;
  text-align: center;
  color: #999;
}

.detail .grade i {
  font-size: 58px;
  color: #4aa1ff;
}

.detail span:last-child {
  display: inline-block;
  font-size: 20px;
  margin-left: 30px;
}

.detail span:last-child i {
  color: #4aa1ff
}


.trophySmall {
  margin-top: 20px;
  height: 30px;
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.trophySmall img {
  height: 20px;
}

.trophySmall .textSmall {
  margin: 0 10px;
  font-size: 20px;
  line-height: 30px;
}

.perceptionOut,
.perceptionIn>div:last-child {
  text-align: left;
}

.perceptionOut>div {
  margin: 0 auto
}

.perceptionIn>div {
  margin: 0 auto
}

.reminder {
  color: #999;
  text-align: center;
  margin-top: 20px;
  font-size: 24px;
}
</style>
